<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" v-loading="loading"
                  @cell-click="toLink">
            <el-table-column label="图片" width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.images" :width="50"/>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
        </el-table>
        <pagination @search="search" :total="total" :currentPage="curPage"></pagination>
    </div>
</template>

<script>
    import axios from 'axios'
    import pagination from './common/Pagination.vue'

    export default {
        components: {
            "pagination": pagination,
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 1 == 1) {
                    return 'warning-row';
                } else if (rowIndex % 2 == 0) {
                    return 'success-row';
                }
                return '';
            },
            toLink(row, column, cell, event) {
                this.$router.push({name: "Detail",params: {id: row.id}})
            },
            getData(pageNum, pageSize) {
                var _this = this;
                _this.loading = true;
                pageSize = pageSize > 0 ? pageSize : this.pageSize;
                axios.get('/api/articles?page=' + pageNum + '&perpage=' + pageSize)
                    .then(function (response) {
                        if (response.status = 200 && response.data.data.data != "") {
                            var res = response.data.data
                            _this.tableData = res.data
                            _this.total = res.total
                            _this.curPage = res.current_page
                            _this.loading = false;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        _this.loading = false;
                    });
            },
            async search(pageNum1, pageSize1) {
                let pageNum = this.curPage = (typeof (pageNum1) === 'number') ? pageNum1 : 1;
                if (pageSize1) {
                    this.pageSize = pageSize1;
                }
                let pageSize = pageSize1 || this.pageSize;
                this.is_search = true;
                this.getData(pageNum, pageSize);
            },
        },
        created() {
            this.getData(1)
        },
        data() {
            return {
                tableData: [],
                dataObj: {},
                curPage: 0,
                total: 0,
                pageSize: 5,
                loading: true
            }
        }
    }
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>